<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input v-model="params.poleName" @clear="getList" clearable placeholder="请输入一体杆名称" class="search-main" />
      <span class="search-label">一体杆编号：</span>
      <el-input v-model="params.poleNumber" @clear="getList" clearable placeholder="请输入一体杆编号" class="search-main" />
      <span class="search-label" >状态：</span>
      <el-select v-model="params.poleStatus">
        <!-- <el-option v-for="item in []" :key="item.id" /> -->
      <el-option label="正常" :value="0" />
      <el-option label="异常" :value="1" />
      <!-- 全部传null,null比较特殊，要加一个：（冒号）加了之后认为是数值，默认为字符串 -->
<el-option label="全部" :value="null" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="getList">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" :round="true" @click="open">添加一体杆</el-button>
      <el-button @click="moredel">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="RodList" @selection-change="fn3">
        <el-table-column type="selection" width="100"  />
        <!-- selection多选框 -->
        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName"/>
        <el-table-column label="一体杆编号" prop="poleNumber"/>
        <el-table-column label="一体杆IP" prop="poleIp"/>
        <el-table-column label="安装区域" prop="areaName"/>
        <el-table-column label="一体杆类型" prop="poleType" :formatter="fn"/>
        <el-table-column label="运行状态" prop="poleStatus" :formatter="fn1"/>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text"  @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        layout="total, sizes, prev, pager, next"
        :total="total"
        :current-page="params.page"
        :page-sizes="[2, 4, 6, 8, 10,100]"
        :page-size="params.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
    <el-dialog :visible="flag" @close="handleClose" :title="form.id?'编辑一体杆' : '添加一体杆'"> 
      <div style="display: flex; justify-content: center;">
      <el-form style="width:400px" :model="form" :rules="rules" ref="form">     
      <el-form-item label="一体杆名称" prop="poleName">
        <el-input v-model="form.poleName"  clearable placeholder="请输入一体杆名称"/>
      </el-form-item>
      <el-form-item  label="一体杆编号" prop="poleNumber">
        <el-input v-model="form.poleNumber"   clearable placeholder="请输入一体杆编号"/>
      </el-form-item>
      <el-form-item label="一体杆IP" prop="poleIp"> 
        <el-input v-model="form.poleIp" clearable placeholder="请输入一体杆Ip"/>
      </el-form-item>
      <el-form-item label="关联区域" prop="areaId" :data="xlList">
        <el-select v-model="form.areaId" clearable placeholder="请选择关联区域">
          <!-- clearable placeholder显示灰色字体不影响输入 -->
                  <el-option
                    v-for="item in xlList "
                    :key="item.areaId"
                    :value="item.areaId"
                    :label="item.areaName"
                  />
        </el-select>
      </el-form-item>
      <el-form-item label="一体杆类型" prop="poleType">
        <el-select v-model="form.poleType" clearable placeholder="选择一体杆类型">
                  <el-option label="入口" value="entrance" />
                  <el-option label="出口" value="export" />
                </el-select>
      </el-form-item>
      <el-form-item class="btn1">
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="confirm" type="primary">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
    </el-dialog>
  </div>
</template>
<script>
import { getRodList ,getRodxl ,addRodAPI,delRod,editRodAPI,} from '@/api/Rod'
export default {
  data(){
    return{
      flag: false,
      xlList:[],
      RodList:[],
      total: 0,
      length: 0,
      params:{
        page: 1,
        pageSize: 10,
        poleName: null,
        poleNumber:null,
        poleStatus: null,
      },
      form:{
        poleName: '',
        poleNumber:'',
        poleIp:'',
        areaId:'',
        poleType:'',
      },
      rules:{
        poleName:[
          //非空校验
          {required : true, message:'不能为空', trigger: 'blur'},
          
        ],
        poleNumber:[
          //非空校验
          {required : true, message:'不能为空', trigger: 'blur'},
        ],
        poleIp:[
          //非空校验
          {required : true, message:'不能为空', trigger: 'blur'},
          
        ],
        areaId:[
          //非空校验
          {required : true, message:'不能为空', trigger: 'blur'},
          
        ],
        poleType:[
          //非空校验
          {required : true, message:'不能为空', trigger: 'blur'},
          
        ],
      }
    }
  },
  mounted(){
    this.getList()
    this.getxl()
  },
  methods:{
    //获取列表
    getxl(){
      getRodxl().then((res)=>{
        this.xlList = res.data
      })
    }, 
    getList(){
      getRodList(this.params).then((res)=>{
        // console.log(res)
        this.RodList = res.data.rows
        this.total = res.data.total
      })
    },
    fn(row){
      return row.poleType === 'export' ? '出口' : '入口'
    },
    fn1(row){
      return row.poleStatus === 0 ? '正常' : '异常'
    },
    handleSizeChange(pageSize){
      this.params.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(page){
      this.params.page = page
      this.getList()
  },
  open(){
      this.flag = true
    },
    handleClose(){
      this.flag = false
      this.form = { 
        poleName: '',
        poleNumber:'',
        areaId:'',
        poleType:'',
        poleIp:'',

    }},
    //删除一体杆
    del(id){
      this.$confirm('你确定要删除吗').then(()=>{
        // console.log(1)
        delRod(id).then(()=>{
        this.getList()
        this.$message.success('删除成功')
      }).catch(()=>{
        this.$message.error('删除失败')
      })
      })
    },
    //获得id对应格式
    fn3(val){
      let str = ''
      for(let index =0 ; index < val.length ; index++){
        const temp = val[ index ]
        str = str + temp.id + ','
      }
      // console.log(str)
      const idstr = str.slice(0, str.length - 1)
      this.idstr = idstr
    },
    //多选删除
    moredel(){
      this.$confirm('你确定要删除吗？').then(()=>{
        delRod(this.idstr).then(()=>{
          this.$message.success('删除成功')
          this.getList()
        })
      })
      
    },
    confirm(){
      //整体校验
      this.$refs.form.validate((ok)=>{
        if(ok){
          if(this.form.id){
            //编辑一体杆
            editRodAPI(this.form).then(()=>{
              this.$message.success('编辑成功')
              this.getList()
              this.flag = false
              //编辑完成后清空数据
              this.form = {
              poleName: '',
              poleNumber:'',
              areaId:'',
              poleType:'',
              poleIp:'',
              }
            })
          }else{
          addRodAPI(this.form).then(()=>{
            this.$message.success('添加成功')
            this.getList()
            this.flag = false
            this.form = {
              poleName: '',
              poleNumber:'',
              areaId:'',
              poleType:'',
              poleIp:'',
              }
          })
        }}
      })

    },
    //编辑
    edit(row){
      this.flag = true
      this.form.id = row.id
      this.form.poleName= row.poleName
      this.form.poleNumber = row.poleNumber
      this.form.poleType = row.poleType
      this.form.areaId = row.areaId
      this.form.poleIp = row.poleIp
    }
  }
}
</script>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}


.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>